<template>
  <view class="xsSearch">
    <view class="header">
      <view class="header_search">
        <view class="header_search_left">
          <image src="../../../static/search.png" mode=""></image>
          <input
            type="text"
            placeholder="品牌 车系 车型 指导价"
            v-model="name"
            auto-focus
            confirm-type="search"
            @confirm="xsSearchRecordsSave()"
            placeholder-style="font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          />
        </view>
        <view class="header_search_right" @click="xsSearchRecordsSave()"
          >搜索</view
        >
      </view>
    </view>
    <scroll-view scroll-y="true" class="main">
      <view class="history" v-if="historyList.length > 0">
        <view class="history_header">
          <view class="history_header_label">历史记录</view>
          <view class="history_header_action" @click="xsSearchRecordsEmpty()">
            <image src="../../../static/del.png" mode=""></image>
            <text>全部清除</text>
          </view>
        </view>
        <view class="history_main">
          <view
            class="history_main_item"
            v-for="(item, i) in historyList"
            :key="i"
            @click="inputVal(item.name)"
            >{{ item.name }}</view
          >
        </view>
      </view>
      <!-- <view class="result">
				<view class="result_item">奥迪</view>
			</view> -->
    </scroll-view>
  </view>
</template>

<script>
import {
  getXsSearchRecordList,
  xsSearchRecordsSave,
  xsSearchRecordsEmpty,
} from "@/api/brand.js";
export default {
  data() {
    return {
      name: "",
      login: uni.getStorageSync("login") || null,
      historyList: [],
    };
  },
  onLoad() {
    let that = this;
    that.getXsSearchRecordList();
  },
  methods: {
    inputVal(name) {
      // this.name = name;
	  uni.navigateTo({
	    url:
	      "/pages/home/newCar/newEnergy/newEnergylist?searchName=" +
	      name,
	  });
    },

    xsSearchRecordsSave() {
      let that = this;
      xsSearchRecordsSave({
        state: "2",
        users_id: that.login.id,
        name: that.name,
      }).then((res) => {
        console.log("result", res);
		if(that.name){
			uni.navigateTo({
			  url:
			    "/pages/home/newCar/newEnergy/newEnergylist?searchName=" +
			    that.name,
			});
		}else{
			uni.showToast({
				title: '请输入搜索内容',
				icon: 'none'
			})
		}
        
      });
    },

    //获取历史搜索记录
    getXsSearchRecordList() {
      let that = this;
      getXsSearchRecordList(that.login.id, 2).then((res) => {
        console.log("record", res);
        that.historyList = res.data || [];
      });
    },
    //全部清除
    xsSearchRecordsEmpty() {
      let that = this;
      xsSearchRecordsEmpty({
        state: "2", //1：首页 2：新车首页
        users_id: that.login.id, //用户id
      }).then((res) => {
        console.log("clear", res);
        that.getXsSearchRecordList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.xsSearch {
  width: 100vw;
  height: 100vh;
  background: #f6f8fa;

  .header {
    width: 100vw;
    background: #ffffff;
    padding: 30rpx 0 10rpx 0;

    &_search {
      width: 694rpx;
      height: 60rpx;
      background: #f6f8fa;
      border-radius: 30rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_left {
        display: flex;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: 27rpx;
        }

        input {
          height: 29rpx;
          width: 500rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          margin-left: 14rpx;
        }
      }

      &_right {
        width: 112rpx;
        height: 52rpx;
        background: #0e59ea;
        border-radius: 26rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 52rpx;
      }
    }
  }

  .main {
    width: 100vw;
    height: calc(100vh - 100rpx);

    .history {
      background: #ffffff;

      &_header {
        height: 86rpx;
        padding: 0 29rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &_label {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        &_action {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          image {
            width: 26rpx;
            height: 26rpx;
          }

          text {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-left: 7rpx;
          }
        }
      }

      &_main {
        background: #ffffff;

        &_item {
          height: 86rpx;
          padding: 0 29rpx;
          width: 100%;
          border-top: 1rpx solid #e6e6e6;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          text-align: left;
          line-height: 86rpx;
        }
      }
    }

    .result {
      background: #ffffff;

      &_item {
        height: 86rpx;
        padding: 0 29rpx;
        width: 100%;
        border-top: 1rpx solid #e6e6e6;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        text-align: left;
        line-height: 86rpx;
      }
    }
  }
}
</style>